notebook.community

Edit and run



In [ ]:

    
from ipywidgets import *

1. VBox(HBox)



In [ ]:

    
VBox([HBox([VBox([Dropdown(description='Choice', options=['foo', 'bar']), 
                  ColorPicker(description='Color'), 
                  HBox([Button(), Button()])]), 
            Textarea(value="Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris "
"nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in "
"reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla "
"pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa "
"qui officia deserunt mollit anim id est laborum.")]),
      HBox([Text(), Checkbox(description='Check box')]), 
      IntSlider(), 
      Controller()], background_color='#EEE')

2. HBox(VBox)



In [ ]:

    
HBox([VBox([Button(description='Press'), Dropdown(options=['a', 'b']), Button(description='Button')]), 
      VBox([Button(), Checkbox(), IntText()])], background_color='#EEE')

3. VBox(HBox) width sliders, range sliders and progress bars



In [ ]:

    
VBox([HBox([Button(), FloatRangeSlider(), Text(), Button()]), 
      HBox([Button(), FloatText(),
            FloatProgress(value=40), Checkbox(description='Check')]), 
      HBox([ToggleButton(), IntSlider(description='Foobar'),
            Dropdown(options=['foo', 'bar']), Valid()]),
     ])

4. Dropdown resize



In [ ]:

    
dd = Dropdown(description='Foobar', options=['foo', 'bar'])
dd



In [ ]:

    
dd.layout.width = '148px'



In [ ]:

    
cp = ColorPicker(description='foobar')

5. Colorpicker alignment, concise and long version



In [ ]:

    
VBox([HBox([Dropdown(width='148px', options=['foo', 'bar']),
            Button(description='Button')]), cp, HBox([Button(), Button()])])



In [ ]:

    
cp.concise = True



In [ ]:

    
cp.concise = False



In [ ]:

    
cp2 = ColorPicker()



In [ ]:

    
VBox([HBox([Button(), Button()]), cp2])



In [ ]:

    
cp2.concise = True



In [ ]:

    
cp2.concise = False

6. Vertical slider and progress bar alignment and resize



In [ ]:

    
HBox([IntSlider(description='Slider', orientation='vertical', height='200px'),
      FloatProgress(description='Progress', value=50, orientation='vertical', height='200px')])



In [ ]:

    
HBox([IntSlider(description='Slider', orientation='vertical'),
      FloatProgress(description='Progress', value=50, orientation='vertical')])

7. Tabs



In [ ]:

    
t = Tab(children=[FloatText(), IntSlider()], _titles={0: 'Text', 1: 'Slider'})
t



In [ ]:

    
t.selected_index = 1



In [ ]: